<template>
  <div>
    <h1>首页</h1>
    <!-- <div>{{ $store.state.count }}</div> -->
    {{ name }}
    {{ countNane }}
    {{ newName }}
    {{ newNames }}
    <button @click="setCount(100)">+</button>
    <button @click="asyncSetCount(333)">+333</button>
    <div>{{ filterlist }}</div>
    <div>{{ difletlist }}</div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { mapMutations, mapGetters } from "vuex";
export default {
  mounted() {},
  //计算属性封装
  computed: {
    //这个是重新定义了内容
    name() {
      return "我不知道";
    },
    // ...mapState(["name", "count"]),
    // count() {
    //   return this.$store.state.count;
    // },
    // name() {
    //   return this.$store.state.name;
    // },
    ...mapState({
      //定义类名，就是重新赋值一个新的名字
      countNane: "count",
      //也是重新定义一个名字而已
      newName: (state) => state.name,
    }),
    ...mapState({
      //重新定义名字而已
      newNames: "name",
    }),
    ...mapGetters(["filterlist", "difletlist"]),
  },
  methods: {
    // //形参 是传给点击事件用的
    // setCount(data) {
    //   this.$store.commit("setCount", data);
    // },
    ...mapMutations(["setCount"]),

    ...mapActions(["asyncSetCount"]),
  },
};
</script>

<style>
</style>
